<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>侧滑</title>
    <style>
        body,
        ul,
        li {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        ul {
            overflow: hidden;
        }

        li {
            display: flex;
            align-items: center;
            height: 50px;
            border-bottom: 1px solid #ebe8e8;
            padding: 0 10px;
            box-sizing: border-box;
            font-size: 14px;
            position: relative;
            transition-duration: 0.1s;
            transition-duration: 0.1s;
            transition: all 0.2s;
        }

        .action {
            color: #fff;
            font-size: 14px;
            width: 165px;
            display: flex;
            height: 100%;
            position: absolute;
            right: -165px;
        }

        .action div {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .action .top {
            background: #009bfe;
        }

        .action .read {
            background: #fe8d3f;
        }

        .action .delt {
            background: #ff5967;
        }
    </style>
</head>

<body>

    <ul>
        <li>
            测试1
            <div class="action">
                <div class="top">置顶</div>
                <div class="read">未读</div>
                <div class="delt">删除</div>
            </div>
        </li>
        <li>
            测试2
            <div class="action">
                <div class="top">置顶</div>
                <div class="read">未读</div>
                <div class="delt">删除</div>
            </div>
        </li>
        <li>
            测试3
            <div class="action">
                <div class="top">置顶</div>
                <div class="read">未读</div>
                <div class="delt">删除</div>
            </div>
        </li>
    </ul>
</body>
<script>
    function $(name) {
        return document.querySelector(name);
    }
    function _(name) {
        return document.querySelectorAll(name);
    }

    _("ul li").forEach(function (v, i) {
        let startx, leftXArr = [],entt;
        //手指按下事件
        v.ontouchstart = function (e) {
            startx = e.touches[0].clientX;
            console.log("屏幕按下坐标：" + startx)

            _("ul li").forEach(function (item, j) {
                if (i != j) {
                    item.style = `
            transform: translateX(0px);
        `
                }
            })
        }
        //手指移动事件
        let pp = 0;
        let eq = 0;
        v.ontouchmove = function (e) {
            let hmovex = e.touches[0].clientX;
            leftXArr.push(hmovex);
            // console.log("屏幕移动坐标：" + leftXArr);
            let df = leftXArr[0] - leftXArr[leftXArr.length - 1];
            // let df1=leftXArr[leftXArr.length-1]-leftXArr[leftXArr.length-2];
            console.log("移动的px：" + df)
            if (df >= 0 && df <= 165) {
                v.style = `
                            transform: translateX(-${df}px);
                        `
            } else if (df < 0) {
                v.style = `
                            transform: translateX(0px);
                        `
                leftXArr = []
            }
            else {
                // pp+=1
                // let dfx=(df-(df-165+pp));
                // console.log("pp"+pp)
                // // leftXArr = []
                // if(leftXArr[leftXArr.length-1]>leftXArr[leftXArr.length-2]){
                //     console.log("值"+dfx)
                //     console.log("进来了")
                //     v.style = `
                //             transform: translateX(-${dfx}px);
                //         `
                // }else{
                v.style = `
                            transform: translateX(-165px);
                        `
                // }
            }
            // console.log(leftXArr.length)

        }
        //手指拿起事件
        v.ontouchend = function (e) {
            entt= e.changedTouches[0].clientX 

            if (leftXArr[0] - leftXArr[leftXArr.length - 1] > 55 && leftXArr[leftXArr.length - 1] - leftXArr[leftXArr.length - 2] < 0&&startx!=entt) {
                v.style = `
                            transform: translateX(-165px);
                        `
            } else if (leftXArr[0] - leftXArr[leftXArr.length - 1] > 110) {
                v.style = `
                            transform: translateX(-165px);
                        `
            }
            else {
                v.style = `
                            transform: translateX(-0px);
                        `
                leftXArr = []//数组清空
            }
        }
    })
</script>

</html>